<template>
  <div>
     <div id="line" style="width: 880px; height: 400px ;margin: 0 auto;">

     </div>
  </div>
</template>
<script>
export default {
  mounted(){
    this.makeLineChart();//调用生成图表方法
  },
   methods:{
    makeLineChart(){
      // 1. 初始化echarts实例对象
      let mychart=this.$echarts.init(document.getElementById('line'))
      // 2. 书写折线图的配置项
      let option={
         title:{
          text:"降雨量",
          subtext:"单位：mm",
         },
         legend:{
          top:10,
          right:10
         },//图例组件
         grid:{ //直角坐标系内绘图网格
          left:'3%',
          right:'4%',
          bottom:'3%',
          containLabel:true
         },
         tooltip:{},//鼠标悬浮提示
         xAxis:{ //x轴数据
          type:'category',
          data:['周一','周二','周三','周四','周五','周六']
         },
         yAxis:{ //规定y轴数据字段
          type:'value'
         },
         series:[ //数据系列
          {
            name:"8月第一周",
            data:[
              {name:"周一",value:78},
              {name:"周二",value:98},
              {name:"周三",value:48},
              {name:"周四",value:28},
              {name:"周五",value:98},
              {name:"周六",value:18},
            ],
            type:"line"
          },
          {
            name:"8月第二周",
            data:[
              {name:"周一",value:18},
              {name:"周二",value:28},
              {name:"周三",value:48},
              {name:"周四",value:68},
              {name:"周五",value:18},
              {name:"周六",value:28},
            ],
             type:"line"
          }
         ]
      }
      // 3.将配置项设置给echarts实例对象
      mychart.setOption(option)
    }
   }
}
</script>